//数据回填
//首先获取id
let id = location.search.substring(4);
//初始化富文本编辑器
initEditor();
//剪裁框
// 1. 初始化图片裁剪器
// 2. 裁剪选项
let options = {
  aspectRatio: 400 / 280,
  preview: ".img-preview",
  //剪裁框默认扩至最大
  autoCropArea: 1,
};
// 3. 初始化裁剪区域
$("#image").cropper(options);
$('button:contains("选择封面")').on("click", function () {
  $(".file").trigger("click");
});
//文件域内容改变,更改剪裁区图片
$(".file").on("change", function () {
  //获取文件对象
  let fileObj = this.files[0];
  //创建url
  let url = URL.createObjectURL(fileObj);
  //更换剪裁区图片
  $("#image").cropper("replace", url);
});
//获取分类,再次渲染
$.ajax({
  url: "/my/category/list",
  success: (res) => {
    let str;
    $.each(res.data, (index, item) => {
      str += `<option value=${item.id}>${item.name}</option>`;
    });
    $(".type").append(str);
    let form = layui.form;
    form.render();
    //在确保数据回填结束后再执行
    $.ajax({
      url: "/my/article/" + id,
      success: (res) => {
        //开始数据回填
        let form = layui.form;
        form.val("editform", res.data);
        //改变图片的显示路径
        $("#image").cropper(
          "replace",
          "http://www.itcbc.com:8080" + "/" + res.data.cover_img
        );
      },
    });
  },
});
//提交事件
$("form").on("submit", function (e) {
  e.preventDefault();
  // 获取数据,传输文件必须使用formdata格式
  let fd = new FormData(this);
  let pic = $("#image").cropper("getCroppedCanvas", {
    width: 400,
    height: 280,
  });
  fd.append("id", id);
  //将获取的图片转化为文件对象格式
  pic.toBlob(function (blob) {
    fd.append("cover_img", blob);
    //放在里面才能看到转换后的结果,图片加载需要时间,异步的问题
    //此时发送修改请求
    $.ajax({
      type: "post",
      url: "/my/article/update",
      data: fd,
      //阻止转换为查询字符串
      processData: false,
      //无需请求头
      contentType: false,
      success: (res) => {
        //修改成功后提示,并在提示完成后跳转到文章列表页
        layer.msg(
          res.message,
          {
            time: 1000, //1秒关闭（如果不配置，默认是3秒）
          },
          function () {
            //do something
            location.href = "./list.html";
          }
        );
      },
    });
  });
});
